<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>01-生命周期</title>
    </head>
    <body>
        <div id="app">
            <div id="num">{{num}}</div>
            <div>{{name}}，有 {{num}} 人给你点赞了</div>
            <button @click="num++">点赞</button>
        </div>

        <script
            src="../node_modules/vue/dist/vue.min.js"
            type="text/javascript"
        ></script>
        <script>
            Vue.config.devtools = true;
            new Vue({
                el: "#app",
                data: {
                    name: "张三",
                    num: 1
                },
                methods: {
                    hello() {
                        return "Hello Vue";
                    }
                },
                beforeCreate () {
                    console.log("========beforeCreate==========");
                    console.log("name: " + this.name + ", num: " + this.num);
                    console.log("方法未加载: " + this.hello);
                    console.log("html模板已加载: " + document.getElementById("num"));
                    console.log("html模板未渲染: " + document.getElementById("num").innerText);
                },
                created () {
                    console.log("========created==========");
                    console.log("name: " + this.name + ", num: " + this.num);
                    console.log("方法已加载: " + this.hello());
                    console.log("html模板已加载: " + document.getElementById("num"));
                    console.log("html模板未渲染: " + document.getElementById("num").innerText);
                },
                beforeMount () {
                    console.log("=========beforeMount=========");
                    console.log("html模板未渲染: " + document.getElementById("num").innerText);
                },
                mounted () {
                    console.log("=========Mounted=========");
                    console.log("html模板已渲染: " + document.getElementById("num").innerText);
                },
                beforeUpdate () {
                    console.log("========beforeUpdate==========");
                    console.log("name: " + this.name + ", num: " + this.num);
                    console.log("html模板未更新: " + document.getElementById("num").innerText);
                },
                updated () {
                    console.log("========updated==========");
                    console.log("name: " + this.name + ", num: " + this.num);
                    console.log("html模板已更新: " + document.getElementById("num").innerText);
                }
            })
        </script>
    </body>
</html>
